import {ModelLoadable} from "../../framework/model/ModelLoadable.ts";
import {CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer";
import {Mesh, Vector3} from "three";
import {LayerDef} from "../../framework/LayerDef.ts";

const css = `border: solid #0e93b7 2px;
  position: absolute;
  background: #62cbe70d;
  color: white;
  padding: 8px 8px;
  border-radius: 4px;
  font-size: 16px;
  white-space: nowrap;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;`

const initDialog = (): HTMLElement => {
    let div = document.createElement('div')
    div.style.cssText = css
    return div
}

export class SimpleDevice extends ModelLoadable {

    mesh?: Mesh

    constructor(name: string, path: string) {
        super(name, "gltf", path)
        this.layer.push(LayerDef.ui)
        this.layer.push(LayerDef.rayCast)
    }

    // 返回x y z
    getPos(): Vector3 {
        return new Vector3(this.scene?.position.x, this.scene?.position.y, this.scene?.position.z)
    }

    setRelativePos(glx: number, glz: number) {
        this.scene?.position.setX(this.scene?.position.x - glx)
        this.scene?.position.setZ(this.scene?.position.z - glz)
    }

    setHtml(html: string) {
        if (this.mesh) {
            // console.log('==========', )
            let div = this.mesh.userData.div as HTMLDivElement
            div.innerHTML = html
        } else {
            let div = initDialog()
            div.style.width = '110px'
            div.style.minWidth = '100px'
            div.style.minHeight = '50px'
            div.innerHTML = html

            let scale = 0.01
            let label = new CSS3DObject(div)
            this.mesh = new Mesh()
            this.mesh.add(label)
            this.mesh.userData.div = div
            this.mesh.scale.set(scale, scale, scale)
            this.mesh.position.set(0, 2, 0)
            this.mesh.rotateY(Math.PI / 2)
            this.scene?.add(this.mesh)
        }

    }
}
